<!DOCTYPE HTML>
<html>
<head>
	<script>
	var gCanvas;
	var gCtx;

	var gBackCanvas;
	var gBackCtx;

	var gBezierPath;

	var Mode = {
		kAdding : {value: 0, name: "Adding"},
		kSelecting : {value: 1, name: "Selecting"},
		kDragging: {value: 2, name: "Dragging"},
		kRemoving : {value: 3, name: "Removing"},
	};

	var gState;
	var gBackgroundImg;

	var WIDTH;
	var HEIGHT;

	///////////////////////////////////////////////////////////////////////////////
	// Functions
	///////////////////////////////////////////////////////////////////////////////
	function drawShape(ctx, xoff, yoff) {
		ctx.beginPath();
		ctx.moveTo(250 + xoff, 35 + yoff);
		ctx.bezierCurveTo(234 + xoff, 77 + yoff, 381 + xoff, 103 + yoff, 318 + xoff, 171 + yoff);
		ctx.bezierCurveTo(294 + xoff, 197 + yoff, 201 + xoff, 201 + yoff, 210 + xoff, 216 + yoff);
		ctx.bezierCurveTo(219 + xoff, 231 + yoff, 248 + xoff, 297 + yoff, 270 + xoff, 293 + yoff);
		ctx.bezierCurveTo(285 + xoff, 290 + yoff, 300 + xoff, 313 + yoff, 315 + xoff, 313 + yoff);
		ctx.bezierCurveTo(352 + xoff, 313 + yoff, 417 + xoff, 363 + yoff, 412 + xoff, 377 + yoff);
		ctx.bezierCurveTo(402 + xoff, 403 + yoff, 273 + xoff, 418 + yoff, 278 + xoff, 435 + yoff);
		ctx.bezierCurveTo(282 + xoff, 449 + yoff, 364 + xoff, 464 + yoff, 340 + xoff, 463 + yoff);
		ctx.bezierCurveTo(325 + xoff, 462 + yoff, 433 + xoff, 473 + yoff, 442 + xoff, 469 + yoff);
		ctx.stroke();
	}



	</script>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		#paintme {
			background: url("img/20140114_app_03-menu_ew.pngs") repeat scroll  -73px  -413px rgba(0, 0, 0, 0);
		}
	</style>
</head>
<body>
<!--<canvas id="myCanvas" width="578" height="200"></canvas>-->
<canvas id="paintme" width="600" height="500"></canvas>
<script>

	var c=document.getElementById("paintme");
	var ctx=c.getContext("2d");

	ctx.beginPath();
	ctx.moveTo(240,20);

	ctx.bezierCurveTo(254, 77, 381, 103, 318, 171);
	ctx.bezierCurveTo(294, 197, 201, 201, 210, 216);
	ctx.bezierCurveTo(219, 231, 248, 297, 270, 293);
	ctx.bezierCurveTo(285, 290, 300, 313, 315, 313);
	ctx.bezierCurveTo(352, 313, 417, 363, 412, 377);
	ctx.bezierCurveTo(412, 403, 273, 418, 278, 435);
	ctx.bezierCurveTo(222, 449, 364, 464, 340, 463);
	ctx.bezierCurveTo(467, 462, 433, 473, 442, 469);
	ctx.stroke();

</script>

</body>
</html>